<template>
  <div class="system-settings">
    <a-card title="系统设置">
      <!-- 管理员密码修改 -->
      <a-card type="inner" title="修改管理员密码" class="password-card">
        <a-form
          :model="passwordForm"
          :rules="passwordRules"
          @finish="handlePasswordChange"
          layout="vertical"
        >
          <a-form-item label="当前密码" name="oldPassword">
            <a-input-password
              v-model:value="passwordForm.oldPassword"
              placeholder="请输入当前管理员密码"
              size="large"
            />
          </a-form-item>

          <a-form-item label="新密码" name="newPassword">
            <a-input-password
              v-model:value="passwordForm.newPassword"
              placeholder="请输入新密码（最少6位）"
              size="large"
            />
            <div class="password-strength" v-if="passwordForm.newPassword">
              <span>密码强度: </span>
              <span :class="['strength-indicator', strengthClass]">
                {{ strengthText }}
              </span>
            </div>
          </a-form-item>

          <a-form-item label="确认新密码" name="confirmPassword">
            <a-input-password
              v-model:value="passwordForm.confirmPassword"
              placeholder="请再次输入新密码"
              size="large"
            />
          </a-form-item>

          <a-form-item>
            <a-space>
              <a-button type="primary" html-type="submit" :loading="loading" size="large">
                提交修改
              </a-button>
              <a-button @click="resetForm" size="large">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </a-card>

      <!-- 默认密码提示 -->
      <a-alert
        message="默认密码提示"
        description="系统初始管理员密码为 123456789，强烈建议首次登录后立即修改"
        type="info"
        show-icon
        class="mt-4"
      />
    </a-card>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import api from '../services/api'

// 表单数据
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 加载状态
const loading = ref(false)

// 表单验证规则
const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入当前密码' },
    { min: 6, message: '密码至少6位' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码' },
    { min: 6, message: '新密码至少6位' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码' },
    {
      validator: (rule, value) => {
        if (value !== passwordForm.newPassword) {
          return Promise.reject('两次输入的密码不一致')
        }
        return Promise.resolve()
      }
    }
  ]
}

// 密码强度计算
const passwordStrength = computed(() => {
  const pwd = passwordForm.newPassword
  if (!pwd) return 0
  
  let strength = 0
  // 长度
  if (pwd.length >= 6) strength++
  if (pwd.length >= 10) strength++
  // 包含数字
  if (/\d/.test(pwd)) strength++
  // 包含字母
  if (/[a-zA-Z]/.test(pwd)) strength++
  // 包含特殊字符
  if (/[!@#$%^&*(),.?":{}|<>]/.test(pwd)) strength++
  
  return strength
})

const strengthClass = computed(() => {
  const strength = passwordStrength.value
  if (strength <= 1) return 'weak'
  if (strength <= 3) return 'medium'
  return 'strong'
})

const strengthText = computed(() => {
  const strength = passwordStrength.value
  if (strength <= 1) return '弱'
  if (strength <= 3) return '中'
  return '强'
})

// 提交密码修改
const handlePasswordChange = async () => {
  loading.value = true
  
  try {
    await api.put('/system/admin-password', {
      old_password: passwordForm.oldPassword,
      new_password: passwordForm.newPassword
    })
    
    message.success('管理员密码修改成功！')
    resetForm()
  } catch (error) {
    message.error(error.response?.data?.detail || '密码修改失败，请检查当前密码是否正确')
  } finally {
    loading.value = false
  }
}

// 重置表单
const resetForm = () => {
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
}
</script>

<style scoped>
.system-settings {
  max-width: 800px;
  margin: 0 auto;
}

.password-card {
  margin-bottom: 20px;
}

.password-strength {
  margin-top: 8px;
  font-size: 14px;
}

.strength-indicator {
  font-weight: 600;
  margin-left: 4px;
}

.strength-indicator.weak {
  color: #ff4d4f;
}

.strength-indicator.medium {
  color: #faad14;
}

.strength-indicator.strong {
  color: #52c41a;
}

.mt-4 {
  margin-top: 16px;
}
</style>
